<template>
  <div class="adminTile border-bottom mb-2">
    <div class="flex-grow-1">
      <span class="iconfont icon-zhankaicaidan"></span>
    </div>
    <div class="me-3">
      <i style="color: #9289f2">系统时间{{time|time}}</i>
    </div>
    <div class="adminTile-right">
      <el-dropdown>
              <span class="el-dropdown-link">
                <span class="user">欢迎您,{{ userInfo.name }}</span>
              </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item><span @click="signOut">退出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import user from "../../api/user";
import time from "../../filter/time";

export default {
  name: "adminHeader",
  data() {
    return {
      userInfo: this.$store.getters["userStore/userInfo"],
      time:''
    }
  },
  filters: {
    time
  },
  mounted() {
    setInterval(()=>{
      this.time = new Date()
    })
  },
  methods: {
    signOut() {
      user.signOut().then(r => {
        if (r.status === 200) {
          location.reload()
        }
      })
    }
  }
}
</script>

<style scoped>
.adminTile {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adminTile-right {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user:hover {
  color: #40aaff;
  text-decoration: underline;
}
</style>